.header {
    height: 60px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
    background: #262626;
    color: #ffffff;
    .leftBtns {
        display: flex;
        flex-direction: row;
        .btn{
            height: 40px;
            align-items: center;
            display: flex;
            justify-content: center;
            border-radius: 8px;
            transition: all .2s;
            margin-right: 5px;
            transition: background-color 100ms linear;
            .btnMsg {
                font-size: 12px;
                display: none;
            }
        }
        .btn:hover {
            background: #000000;
            transition-duration: 0ms;
            .btnMsg {
                display: inline;
            }
            
        }
        .btn.home{
            z-index: 2;
            margin-right: 1px;
            border-radius: 0px;
            position: relative;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            &:after{
                
                content: '';
                position: absolute;
                border-style: solid;
                border-left-width:8px;
                margin-left:1px;
                top: -1%;
                left: 100%;
                border-color: #363636;
                border-top-color: transparent;
                border-top-width:20px;
                border-bottom-color: transparent;
                border-bottom-width: 20px;
                border-right-color: transparent;
                transition: border-color 110ms linear;
                
            }
            &:hover::after{
                border-left-color: #000000;
                transition-duration: 1ms;
            }
        }
        .bread{
            padding-left: 20px;
            z-index: 1;
            border-radius: 1px;
            position: relative;
            &:after{
                content: '';
                position: absolute;
                border-style: solid;
                border-left-width:8px;
                margin-left:0.5px;
            
                top: -1%;
                left: 100%;
                border-color: #363636;
                border-top-color: transparent;
                border-top-width:20px;
                border-bottom-color: transparent;
                border-bottom-width: 20px;
                border-right-color: transparent;
                transition: border-color 110ms linear;
            }
            &:before{
                
                content: '';
                position:absolute;
                border-style: solid;
                border-left-width: 8px;
                top: -1;
                left: -0.5px;
                border-color: #262626;
                border-top-color: transparent;
                border-bottom-color: transparent;
                border-top-width:20px;
                border-bottom-width: 20px;
                border-right-color: transparent;
                transition: border-color 110ms linear;
            }
            &:hover::after{
                z-index: 3;
                border-left-color: #000000;
                transition-duration: 1ms;
            }
            }
            .dbBread{
                padding-left: 20px;
                margin-left:-5px;
                z-index: 0;
            }
            .breadEnds{
                border-top-right-radius: 8px;
                border-bottom-right-radius: 8px;
                &:after{
                    all:initial;
                }
            }
    }
    .headerCenter{
        height: 40px;
    }
    .headerMenu {
        display: flex;
        font-weight: 600;
        font-size: 18px;
    }
    .profileImage {
        cursor: pointer;
    }
}